<template>
  <div class="main_box" style="padding: 10px">
    <div class="detail_wrap">
      <div class="tit">
        <h2>康 来 项 目 组 信 息</h2>
        <el-button
          type="success"
          plain
          size="small"
          icon="fa fa-mail-forward"
          @click="returnList"
        >
          返 回</el-button
        >
      </div>
      <div class="con">
        <ul>
          <li>
            <label class="label">项目组编号:</label>
            <span>{{ dataInfo.itemCode }}</span>
          </li>
          <li>
            <label class="label">项目组名称:</label>
            <span>{{ dataInfo.itemName }}</span>
          </li>
          <li>
            <label class="label">项目组别称:</label>
            <span>{{ dataInfo.itemShortName }}</span>
          </li>
          <li>
            <label class="label">地址:</label>
            <span>{{ (dataInfo.address||[]).join("、") }}</span>
          </li>
          <li>
            <label class="label">收费级别:</label>
            <span>{{ (dataInfo.feeLevels||[]).join("、") }}</span>
          </li>
          <li>
            <label class="label">方法学:</label>
            <span>{{ (dataInfo.methodologys||[]).join("、") }}</span>
          </li>
          <li>
            <label class="label">检测时长:</label>
            <span>{{ dataInfo.itemTime }}</span>
          </li>
          <li>
            <label class="label">收费价格:</label>
            <span>{{ dataInfo.itemPrice }}</span>
          </li>
          <li>
            <label class="label">检测流程:</label>
            <span>{{ dataInfo.itemProcess }}</span>
          </li>
          <li>
            <label class="label">临床意义:</label>
            <span>{{ dataInfo.itemMeaning }}</span>
          </li>
          <li>
            <label class="label">注意事项:</label>
            <span>{{ dataInfo.itemNote }}</span>
          </li>
          <li>
            <label class="label">状态:</label>
            <span>{{ dataInfo.state | filterState }}</span>
          </li>
          <li>
            <label class="label">创建人名称:</label>
            <span>{{ dataInfo.createUserName }}</span>
          </li>
          <li>
            <label class="label">创建时间:</label>
            <span>{{ dataInfo.createDate }}</span>
          </li>
          <li>
            <label class="label">修改人名称:</label>
            <span>{{ dataInfo.modifyUserName | filterChange }}</span>
          </li>
          <li>
            <label class="label">修改时间:</label>
            <span>{{ dataInfo.modifyDate | filterChange }}</span>
          </li>
        </ul>
      </div>
      <div class="tit">
        <h2>价 格 列 表</h2>
      </div>
      <el-table
        :data="baseItemPrices"
        highlight-current-row
        :header-cell-style="{ 'background-color': '#f2f2f2' }"
        style="width: min-content; margin: 20px 0"
      >
        <el-table-column type="index" width="80px" align="center" label="序号">
        </el-table-column>
        <el-table-column
          label="地址"
          width="180px"
          align="center"
        >
        <template slot-scope="{row:{provinceName,cityName}}">
          <div>
            {{ provinceName+(cityName?cityName:'') }}
          </div>
        </template>
        </el-table-column>
        <el-table-column
          prop="feeLevel"
          label="收费级别"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="methodology"
          label="方法学"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="itemPrice"
          label="价格(元)"
          width="180px"
          align="center"
        >
        </el-table-column>
      </el-table>
      <div class="tit">
        <h2>关 联 康 来 子 项 目 列 表</h2>
      </div>
      <el-table
        :data="subItemVos"
        highlight-current-row
        :header-cell-style="{ 'background-color': '#f2f2f2' }"
        style="width: min-content; margin: 20px 0"
      >
        <el-table-column type="index" width="80px" align="center" label="序号">
        </el-table-column>
        <el-table-column
          prop="subItemId"
          label="子项目ID"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="subItemCode"
          label="子项目编号"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="subItemName"
          label="子项目名称"
          width="300px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="subItemShortName"
          label="子项目别称"
          width="180px"
          align="center"
        >
        </el-table-column>
      </el-table>

    </div>
  </div>
</template>

<script>
import ReportItemApi from "@/api/report/reportItem";
export default {
  data() {
    return {
      dataInfo: {},
      subItemVos: [],
      baseItemPrices:[],
    };
  },
  methods: {
    getData() {
      ReportItemApi.getReportItem({ itemId: this.$route.query.id }).then(
        (res) => {
          this.getOtherInfo(res.data)
          this.dataInfo = res.data;
          this.subItemVos = res.data.subItemVos;
          this.baseItemPrices = res.data.baseItemPrices
        }
      );
    },
    getOtherInfo(data){
      const {baseItemPrices} = data
      const address = []
      const methodologys =[]
      const feeLevels =[]
      baseItemPrices.forEach(item=>{
        if(!address.some(item2=>item2==(item.provinceName+(item.cityName||"")))){
          address.push(item.provinceName+(item.cityName||""))
        }
        if(!methodologys.some(item2=>item2==item.methodology))methodologys.push(item.methodology)
        if(!feeLevels.some(item2=>item2==item.feeLevel))feeLevels.push(item.feeLevel)
      })
      data.address = address
      data.methodologys = methodologys
      data.feeLevels = feeLevels
    },
    returnList() {
      // this.$router.go(-1)
      this.$store.dispatch("delView", this.$route);
      this.$router.push({ path: "/items/reportItemManagement" });
    },
  },
  mounted() {
    this.getData();
  },
  filters: {
    //   过滤器
    filterState(value) {
      // 状态 -1.删除 0.禁用 1.启用
      if (value == 1) {
        return "启用中";
      } else if (value == 0) {
        return "已禁用";
      } else if (value == -1) {
        return "已删除";
      }
    },
    filterChange(value) {
      // 是否被修改过
      if (value) {
        return value;
      } else {
        return "未修改";
      }
    },
  },
};
</script>
<style lang="scss" src="@/assets/css/views/Detail.scss" scope></style>
